﻿function drawRect(ctx) {
    ctx.moveTo(20, 20);       // 移动到 （20，20） 位置
    ctx.rectTo(200, 200);     // 从（20，20） 绘制矩形到（50，50）位置；一个 30 x 30 大小的矩形
    ctx.setFillStyle('red')   // 设置填充样式为红色，与下一行效果一致ctx.setFillStyle('#FF0000')
    ctx.setLineWidth(3);
    ctx.draw();
}

function drawCircle(ctx) {
    var data = [90, 50, 50, 50, 50, 90];
    var colors = ['#ff0000', '0#fff000', '#f0f0f0', '#ff00ff', '#fff000', '#00ffff'];
    var sum = 0;
    for (var i = 0, len = data.length; i < len; i++) {
        sum += data[i];
    }

    var screen_w = 272;                                 //画布宽度        
    var point = { x: screen_w / 2, y: screen_w / 2 };   //圆心        
    var rudius = screen_w / 2;                          //半径        
    var start = -90;                                    //起始角度

    for (var j = 0, length = data.length; j < length; j++) {
        var stop = start + data[j] / sum * 360;     //终止角度
        ctx.moveTo(point.x, point.y);               //移至圆心
        ctx.arc(point.x, point.y, rudius, rudius, start, stop); //指定圆弧圆心、半径、起始角度、终止角度
        ctx.setFillStyle(colors[j]);                            //设置填充颜色
        ctx.fill();                                             //填充区域
        start = stop;//将上一个圆弧的终止角度做为下一个圆弧的起始角度
    }
    ctx.draw(); //绘制图形
}

function drawSharp(ctx) {
    ctx.setFillStyle("#A000A0");
    ctx.setLineWidth(5);

    // 定义路径
    ctx.moveTo(-90, 0);                 // 路径起点
    ctx.arc(-40, 0, 20, 20, 180, 0);    // 较小的半圆弧
    ctx.arc(30, 0, 30, 30, 180, 0);     // 较大的半圆弧
    ctx.lineTo(90, 0);                  // 路径终点

    // 对路径进行变换
    ctx.scale(0.8, 2);                  // 通过对 x, y 方向的不同缩放比例产生椭圆
    ctx.rotate(-30);                    // 旋转图案
    ctx.translate(80, 50);              // 移动到合适的位置
    //ctx.stroke(); 
    ctx.draw();
}

var page = {
    timer: 0,
    timer2: 0,
    citys: [
        { provincial: '四川省', capital: '成都市' },
        { provincial: '河北省', capital: '太原市' },
        { provincial: '辽宁省', capital: '沈阳市' },
        { provincial: '吉林省', capital: '长春市' },
        { provincial: '黑龙江省', capital: '哈尔滨市' },
        { provincial: '江苏省', capital: '南京市' },
        { provincial: '安徽省', capital: '合肥市' },
        { provincial: '福建省', capital: '福州市' },
        { provincial: '江西省', capital: '南昌市' },
        { provincial: '山东省', capital: '济南市' },
        { provincial: '河南省', capital: '郑州市' },
    ],
    /* 此方法在第一次显示窗体前发生 */
    onLoad: function (event) {
        /*-----------------------panel1--------------------*/
        this.setData({
            Clock1: {
                hour: { x: 10, y: 67 },
                minute: { x: 8, y: 100 },
                second: { x: 7, y: 103 },
            }
        })

        var that = this;
        var sec = 0;
        this.timer = setInterval(function () {
            that.setData({ Clock1: { value: sec++ } })
        }, 10);

        /*-----------------------panel2--------------------*/
        var array = [];
        for (var i = 0, len = this.citys.length; i < len; i++) {
            var obj = {};
            obj.lblProvincal = { value: this.citys[i].provincial };
            obj.lblCapital = { value: this.citys[i].capital };
            array.push(obj);
        }
        this.setData({
            listctrl1: {
                list: {
                    page: this,
                    items: [
                        {
                            xml: 'Panels/safaPoint',
                            items: array
                        }
                    ]
                }
            }
        })

        /*-----------------------panel3--------------------*/
        var ctx = pm.createCanvasContext('Canvas1', this);
        // drawRect(ctx);
        drawCircle(ctx);

        var ctx2 = pm.createCanvasContext('Canvas2', this);
        drawSharp(ctx2);

        // var that = this;
        // var count = 0;
        // this.timer2 = setInterval(function (ctx) {
        //     switch (count++) {
        //         case 1:
        //             drawCircle(ctx);
        //             break;
        //         case 2:
        //             drawRect(ctx);
        //             break;
        //         case 3:
        //             drawSharp(ctx);
        //             count = 0;
        //             break;
        //         default:
        //             break;
        //     }
        // }, 1000);
    },

    /* 此方法展示窗体后发生 */
    onResume: function (event) {

    },

    /* 当前页状态变化为显示时触发 */
    onShow: function (event) {

    },

    /* 当前页状态变化为隐藏时触发 */
    onHide: function (event) {

    },

    /* 此方法关闭窗体前发生 */
    onExit: function (event) {
        clearInterval(this.timer);
        clearInterval(this.timer2);
    },
};

Page(page);

page = 0;
